<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>
<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: red !important;
    }
</style>

<script>
    window.onload = function () {
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            box.style.width="200px";
            box.style.height="200px";
            box.style.backgroundColor="green";
           

            /*
            获取元素的当前显示的样式

            IE浏览器：
            语法：元素.currentStyle.样式名
            它可以用来读取当前元素正在显示的样式
            如果当前元素没有设置改样式，则获取它的默认值
            console.log(box1.currentStyle.width);

            其他浏览器：
            getComputedStyle()这个方法来获取元素当前的样式
            这个方法是window的方法，可以直接使用
            需要两个参数
                第一个：要获取样式的元素
                第二个：可以传递一个微元素，一般都传null
            console.log(getComputerStyle(box1,null).width);
            */
            //var obj = getComputedStyle(box,null);
            //alert(obj.width);
            //console.log(getComputedStyle(box,null).width);



            //这里的width要用字符串表示，否则会视为变量
            getStyle(box,"width");
        };


        //IE和其他浏览器的兼容性函数
        function getStyle(obj,name){
            //在浏览器中如果没有变量浏览器会报错，但是没有找到属性会返回undefined，相当于false
            /*if(window.getComputedStyle){
                //正常浏览器的方式，具有getComputedStyle()方法

                //函数中，要调用赋值给形参的实参是，可以使用[形参]的方式
                console.log(getComputedStyle(obj,null)[name]); 
            }else{
                //IE8的方式
                console.log(obj,currentStyle[name]);
            }
            */

            //兼容性问题通常使用三目运算符
            window.getComputedStyle? console.log(getComputedStyle(obj,null)[name]):console.log(obj,currentStyle[name]);
        }
        

        var btn2 = document.getElementById("btn2");
        btn2.onclick = function(){
            console.log(box.style.width);
            console.log(box.style.height);
            console.log(box.style.backgroundColor);
            /*
            通过style设置和修改的都是内联样式
            所以再点击btn1之前点击btn2是不会有反应的
            点击btn1之后html中box中便有了内联样式
            */
        };
    };

</script>

<body>
    <div id="box"></div>
    <button id="btn1">点击我！</button>
    <button id="btn2">样式</button>

</body>

</html>